<template>
  <div class="cart">
    <!-- 头部导航 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-empty description="购物车咱无内容" v-if="cartList === undefined">
      <van-button round type="danger" @click="goHome" class="bottom-button"
        >立即购物</van-button
      >
    </van-empty>
    <!-- 购物车数据 -->

    <div class="cartList">
      <van-swipe-cell v-for="item in cartList" :key="item.proid">
        <van-checkbox
          v-model="item.flag"
          @click="selecton(item)"
        ></van-checkbox>
        <van-card
          :price="item.originprice"
          desc="描述信息"
          :title="item.proname"
          class="goods-card"
          :thumb="item.img1"
        >
          <template #footer>
            <van-button size="mini" @click="subtract(item)">-</van-button>
            <span class="num">{{ item.num }}</span>
            <van-button size="mini" @click="add(item)">+</van-button>
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            @click="removeList(item)"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 推荐列表列表 -->
    <span class="ecommend">你可能还想要</span>

    <ul class="list">
      <li
        v-for="item in ecommendList"
        :key="item"
        v-show="item.img1"
        @click="$router.push(`/details?id=${item.proid}`)"
      >
        <img :src="item.img1" :alt="item.proname" />
        <p>{{ item.proname }}</p>
        <span>￥{{ item.originprice }}</span>
      </li>
    </ul>
    <van-submit-bar :price="totalPrice" button-text="合计" @submit="onSubmit">
      <van-checkbox v-model="cartListAllIsCheckode" @click="changeCartAll"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>
import {
  getCarList,
  getRecommendList,
  cartSelectone,
  caretRemove,
  addList,
  getCarListAll,
} from "../server/cart.js";
export default {
  data() {
    return {
      // price: 0,
      num: 1,
      checked: false,
      cartList: [],
      ecommendList: [],
    };
  },
  computed: {
    totalPrice() {
      return this.cartList.reduce((prev, item) => {
        return prev + (item.flag ? item.num * item.originprice * 100 : 0);
      }, 0);
    },
    cartListAllIsCheckode: {
      get() {
        return this.cartList.every((item) => item.flag);
      },
      set(v) {
        return this.cartList.forEach((item) => (item.flag = v));
      },
    },
  },
  methods: {
    //是否全选
    changeCartAll() {
      getCarListAll({
        userid: this.$store.state.userid,
        type: this.cartListAllIsCheckode,
      }).then((res) => {
        if (res.code === "200") this.getList();
      });
    },
    //去购物
    goHome() {
      this.$router.push("/home");
    },
    // 删除购物车数据
    removeList(item) {
      caretRemove({ cartid: item.cartid }).then((res) => {
        this.getList();
      });
    },
    //单挑数据选中状态
    selecton(item) {
      cartSelectone({ cartid: item.cartid, flag: item.flag }).then((res) => {
        if (res.code === "200") {
          this.getList();
        }
      });
    },
    // 减按钮
    subtract(item) {
      console.log(item);
      if (item.num <= 1) return;
      item.num--;
      addList({ cartid: item.cartid, num: item.num }).then((res) => {
        this.getList();
      });
    },
    //加
    add(item) {
      item.num++;
      addList({ cartid: item.cartid, num: item.num }).then((res) => {
        this.getList();
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onLoad() {},
    // 获取购物车数据
    getList() {
      getCarList({ userid: this.$store.state.userid }).then((res) => {
        if (res.code === "200") {
          this.cartList = res.data;
          this.$store.commit("setCartLength", res.data ? res.data.length : 0);
        }
      });
    },
    onClickLink() {
      console.log("更改地址");
    },
    // 合计
    onSubmit() {
      console.log("合计");
    },
  },

  created() {
    this.getList();
    getRecommendList().then((res) => {
      this.ecommendList = res.data;
    });
  },
};
</script>

<style scoped>
.cart {
  padding-bottom: 3.125rem;
}
:deep(.van-swipe-cell__wrapper) {
  display: flex;
}

.van-card {
  flex: 1;
  background-color: rgb(255 255 255 /0) !important;
}
:deep(.van-card__footer) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
:deep(.van-card__footer > button) {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
  line-height: 1;
  color: rgb(244, 177, 186);
  border-color: rgb(244, 177, 186);
  border-radius: 50%;
  margin: 0;
}
:deep(.van-card__footer > button:nth-of-type(2)) {
  background-color: red;
  color: #fff;
}
:deep(.van-card__footer > span) {
  width: 3.125rem;
  height: 100%;
  display: block;
  text-align: center;
  font-size: 1.25rem;
}

.bottom-button {
  width: 160px;
  height: 40px;
}
.list {
  border-radius: 0.9375rem;
  padding: 0 0.625rem;
  box-sizing: border-box;
  margin: 0.3125rem 0;
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(246, 246, 246);
  justify-content: space-between;
}
.list > li {
  width: 45%;
  margin: 0.625rem 0.3125rem;
  border-radius: 0.9375rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.list > li > img {
  width: 100%;
  border-radius: 0.9375rem;
}
.list > li > p {
  font-size: 0.75rem;
  color: #666;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list > li > span {
  color: red;
  text-align: center;
}
.ecommend {
  display: block;
  width: 100%;
  height: 1.875rem;
  font-size: 0.875rem;
  color: #666;
  text-align: center;
  line-height: 1.875rem;
  margin: 1.25rem 0;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  /* height: 100%; */
}
</style>
